<template>
  <div class="incolumn">
    <div class="incolumn_countr">
      <div class="block">
        <el-form :inline="true" :model="Pagination" class="demo-form-inline">
          <el-form-item label="输入搜索" class="s1">
            <el-input v-model="Pagination.key" placeholder="请输入快递单号" style="width:150%"></el-input>
          </el-form-item>
          <el-form-item label="输入时间" label-width="230px">
            <el-date-picker
              v-model="formInline.time1"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chage"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onsubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- =================列表表单 =====================  -->
    <div class="incolumn_from">
      <el-table
        :data="tableData_RETURN"
        style="width: 100%;background-color:#fff"
        :height="autoHeightTable"
        stripe
      >
        <el-table-column label="序号" align="center" type="index" width="170"></el-table-column>
        <el-table-column prop="supplierName" label="企业名称" align="center"></el-table-column>
        <el-table-column prop="tuihuoType" label="类型" align="center">
          <template v-slot="scope">
            <span v-if="scope.row.tuihuoType==12">采购退货</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="申请人" align="center">
        </el-table-column>
        <el-table-column label="申请时间" align="center">
          <template v-slot="scope">
            {{ renderTime(scope.row.createonTime) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template v-slot="scope">
            <span v-show="scope.row.status==1">待审核</span>
            <span v-show="scope.row.status==2">驳回</span>
            <span v-show="scope.row.status==3">待退货</span>
            <span v-show="scope.row.status==4">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status==3" type="primary" size="small" @click="showDetail(scope.row.id,1)">退货审核
            </el-button>
            <el-button type="text" size="small" @click="showDetail(scope.row.id,2)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom_slate">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="Pagination.current"
          :page-size="Pagination.pagesize"
          @current-change="handleCurrentChange"
          :page-count="Pagination.total"
        ></el-pagination>
      </div>
      <!--============弹框==================-->
      <el-dialog
        append-to-body
        :visible.sync="dialogVisible_detail"
        width="60%"
      >
        <span style="font-weight: 700;font-style: normal;font-size: 16px;color: #17233D;">物流单详情</span>
        <div style="width: 100%;border-top: 1px solid rgb(237, 239, 240);margin-top: 15px">
          <el-form :inline="true" :model="form_SUPPLIER" class="demo-form-inline" style="margin-top: 5px">
            <el-form-item label="企业名称">
              <el-input disabled v-model="form_SUPPLIER.enterpriseName"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
              <el-input disabled v-model="form_SUPPLIER.contacts"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input disabled v-model="form_SUPPLIER.contactsPhone"></el-input>
            </el-form-item>
            <el-form-item label="收货地址">
              <el-input disabled v-model="form_SUPPLIER.enterpriseAdress"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span style="font-weight: 700;font-style: normal;font-size: 14px;color: #17233D;">运输方式：</span>
        <el-radio :disabled="isDetail" v-model="radio_way" label="1">快递</el-radio>
        <el-radio :disabled="isDetail" v-model="radio_way" label="2">物流</el-radio>
        <div style="width: 100%;border-top: 1px solid rgb(237, 239, 240);margin-top: 15px">
          <el-form :inline="true" :model="form_LOGISTICS" class="demo-form-inline" style="margin-top: 5px">
            <el-form-item label="快递公司">
              <el-input style="width: 100px" :disabled="isDetail" v-model="form_LOGISTICS.deliveryCompany"></el-input>
            </el-form-item>
            <el-form-item v-show="radio_way==1">
              <!--<el-input style="width: 170px"  v-model="form_LOGISTICS.wuliuNumber"></el-input>-->
              <el-tag
                :key="tag"
                v-for="tag in dynamicTack"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{ tag }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue_Tack"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button :disabled="isDetail" v-else class="button-new-tag" size="small" @click="showInput">+ 快递单号</el-button>
            </el-form-item>
            <el-form-item v-show="radio_way==2" label="车牌号">
              <el-input :disabled="isDetail"  style="width: 100px" v-model="form_LOGISTICS.carNumber"></el-input>
            </el-form-item>
            <el-form-item v-show="radio_way==2" label="司机姓名">
              <el-input :disabled="isDetail"  style="width: 100px" v-model="form_LOGISTICS.carName"></el-input>
            </el-form-item>
            <el-form-item v-show="radio_way==2" label="司机联系方式">
              <el-input :disabled="isDetail"  v-model="form_LOGISTICS.carPhone"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span style="font-weight: 700;font-style: normal;font-size: 14px;color: #17233D;">货物详情：</span>
        <div style="width: 100%;border-top: 1px solid rgb(237, 239, 240);margin-top: 15px">
          <el-table
            :data="tableData_WAREHOUSELOG"
            style="width: 100%;height: 250px" :max-height="250">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              prop="productNumber"
              label="产品图号" align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="productName" align="center"
              label="产品名称">
            </el-table-column>
            <el-table-column
              prop="danwei" align="center"
              label="单位">
            </el-table-column>
            <el-table-column
              prop="number" align="center"
              label="发货数量">
            </el-table-column>
            <el-table-column
              prop="gross" align="center"
              label="订单总量">
            </el-table-column>
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button v-if="isDetail==false" type="primary" @click="confirm()">确 认</el-button>
          <el-button type="info" @click="dialogVisible_detail = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  inject: ['reload'],
  name: "ReturnGoodsManage",
  components: {},
  data() {
    return {
      isDetail:false,//是否编辑
      /*================列表数据==========================*/
      inputVisible: false,
      inputValue_Tack: '',
      dynamicTack: [],//动态
      tableData_RETURN: [],
      form_SUPPLIER: {},//供应商详情
      form_LOGISTICS: {},//物流详情
      tableData_WAREHOUSELOG: [],//货物详情
      formInline: "",
      radio_way: "1",
      Pagination: {
        beginTime: "",
        endTime: "",
        key: "",
        total: 1,//总共页
        current: 1,//当前页
        pagesize: 10,//页面数据个数
      },
      /*====================================*/
      dialogVisible_detail: false
    };
  },
//监听属性 类似于data概念",
  computed: {
    autoHeightTable() {
      return document.documentElement.scrollHeight - 251 - 93
    }
  },
//监控data中的数据变化",
  watch: {},
//方法集合",
  methods: {
    confirm() {
      let message = JSON.parse(localStorage.getItem("message"));
      const params = {
        "carName": this.form_LOGISTICS.carName,
        "carNumber": this.form_LOGISTICS.carNumber,
        "carPhone": this.form_LOGISTICS.carPhone,
        "createonTime": "",
        "fahuoTime": "",
        "id": this.form_SUPPLIER.thisId,
        "kuaidiDanhao": this.dynamicTack.toString(),
        "only": null,
        "status": null,
        "supplierId": this.form_SUPPLIER.id,
        "supplierName": this.form_SUPPLIER.enterpriseName,
        "tuihuoDanhao": "",
        "tuihuoType": null,
        "type": this.radio_way,
        "userId": null,
        "userName": null,
        "deliveryCompany":this.form_LOGISTICS.deliveryCompany,
        "operationUserid":message.Id,
        "warehouseLogs": []
      }
      console.log(params)
      axios.post("/JX_java/warehouse/updateProductReturn", params).then(res => {
        if (res.data.data == "操作成功") {
          this.$message.success(res.data.data);
          this.dialogVisible_detail = false;
          this.reload();
          this.form_SUPPLIER={}
        } else {
          this.$message.error(res.data.data);
          this.dialogVisible_detail = false;
          this.reload();
        }
      })
    },
    //添加快递单号
    handleClose(tag) {
      this.dynamicTack.splice(this.dynamicTack.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue_Tack = this.inputValue_Tack;
      if (inputValue_Tack) {
        this.dynamicTack.push(inputValue_Tack);
      }
      this.inputVisible = false;
      this.inputValue_Tack = '';
    },

    //产品的详情
    showDetail(id, type) {
      console.log(id)
      if (type == 1) {//审核
        axios.get("/JX_java/procurement/tuihuo/getProductRetrurnDetails?tableId=" + id).then(res => {
          let data = res.data.data;
          console.log(data)
          this.form_SUPPLIER.thisId = data.id
          this.form_SUPPLIER.id = data.supplierTb.id
          this.form_SUPPLIER.enterpriseName = data.supplierTb.enterpriseName
          this.form_SUPPLIER.contacts = data.supplierTb.contacts
          this.form_SUPPLIER.contactsPhone = data.supplierTb.contactsPhone
          this.form_SUPPLIER.enterpriseAdress = data.supplierTb.enterpriseAdress
          this.tableData_WAREHOUSELOG = data.warehouseLogs
          this.dialogVisible_detail = true
          this.isDetail=false
        })
      } else if (type == 2) {//详情
        this.isDetail=true
        this.dialogVisible_detail = true
        axios.get("/JX_java/procurement/tuihuo/getProductRetrurnDetails?tableId="+id).then(res=>{
          console.log(res.data.data)
          let data = res.data.data;
          this.form_SUPPLIER.thisId = data.id
          this.form_SUPPLIER.id = data.supplierTb.id
          this.form_SUPPLIER.enterpriseName = data.supplierTb.enterpriseName
          this.form_SUPPLIER.contacts = data.supplierTb.contacts
          this.form_SUPPLIER.contactsPhone = data.supplierTb.contactsPhone
          this.form_SUPPLIER.enterpriseAdress = data.supplierTb.enterpriseAdress
          this.tableData_WAREHOUSELOG = data.warehouseLogs
          this.form_LOGISTICS.deliveryCompany=data.deliveryCompany
          //this.dynamicTack=
          let strings = data.kuaidiDanhao.split(",");
          this.dynamicTack=strings[0]==""?[]:strings
          console.log(strings,"00000")
        })

      }
    },
    //列表获取
    getList() {
      const data = {
        "beginTime": this.Pagination.beginTime,
        "endTime": this.Pagination.endTime,
        "key": this.Pagination.key,
        "pageNum": this.Pagination.current,
        "pageSize": this.Pagination.pagesize,
        "type": 0
      }
      let message = JSON.parse(localStorage.getItem("message"));
      axios.post("/JX_java/procurement/tuihuo/getProductReturnList?userId=" + message.Id + "&&type=" + 2, data).then(res => {
        console.log(res.data.data)
        let params = res.data.data;
        this.tableData_RETURN = params.content;
        this.Pagination.total = params.totalPages
      })
    },
    chage(e) {
      if (e) {
        this.Pagination.beginTime = e[0];
        this.Pagination.endTime = e[1];
      } else {
        this.Pagination.beginTime = '';
        this.Pagination.endTime = '';
      }
    },
    //格式化时间
    renderTime(date) {
      return date==null?"":date.substring(0, 10);
      // const dateee = new Date(date).toJSON();
      // if (date == null) {
      //   return "---";
      // } else {
      //   return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
      // }
    },
    //分页方法
    handleCurrentChange(e) {
      this.Pagination.current = e;
      this.getList();
    },
    onsubmit() {
      this.getList();
    },
  },
//生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },
//生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.getList();
  },
//生命周期 - 挂载之前",html模板未渲染
  beforeMount() {
  },
//生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
  },
//生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {
  },
//生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {
  },
//生命周期 - 销毁之前",
  beforeDestroy() {
  },
//生命周期 - 销毁完成",
  destroyed() {
  },
//如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {
  },
}
</script>

<style lang="scss" scoped>
.Suppliermanagement .search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin: 0 20px 20px;
}

.Suppliermanagement .demo-form-inline {
  display: inline-block;
}

.Suppliermanagement .el-pagination {
  margin-top: 15px;
  text-align: center;
}

.Suppliermanagement .ebtn {
  float: right;
  margin-right: 20px;
}

.bottom_slate {
  height: 60px;
  line-height: 40px;
  text-align: center;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
